<template>
  <div class="table-all">
    <!-- 搜索区 -->
    <div class="app-container search-box">
      <SearchForm
        :form="searchData.form"
        :options="searchData.options"
        @searchUpdate="search"
        @resetSearchData="resetSearchData"
        @toLoadMethods="toLoadMethods"
      ></SearchForm>
      <!--不使用查询组件-->
      <!--<div>-->
        <!--<el-form-->
          <!--ref="form"-->
          <!--:model="searchData"-->
          <!--:inline="true"-->
          <!--label-width="0"-->
          <!--class="form"-->
        <!--&gt;-->
          <!--<el-form-item prop="year" key="year" label="年份">-->
            <!--<el-date-picker-->
              <!--class="w100"-->
              <!--type="year"-->
              <!--placeholder="请选择年份"-->
              <!--value-format="yyyy"-->
              <!--v-model="searchData.year"-->
            <!--&gt;</el-date-picker>-->
          <!--</el-form-item>-->
          <!--<el-form-item prop="checkType" key="checkType" label="体检分类">-->
            <!--<el-select-->
              <!--class="w100"-->
              <!--v-model="searchData.checkType"-->
              <!--clearable-->
              <!--placeholder="请选择体检分类"-->
            <!--&gt;-->
              <!--<el-option-->
                <!--v-for="data in checkTypeOptions"-->
                <!--:key="data.value"-->
                <!--:label="data.label"-->
                <!--:value="data.value"-->
              <!--&gt;-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item-->
            <!--prop="threeTargetNo"-->
            <!--key="threeTargetNo"-->
            <!--label="体检指标"-->
          <!--&gt;-->
            <!--<el-input-->
              <!--v-model="searchData.threeTargetNo"-->
              <!--placeholder="请点击选择指标"-->
              <!--clearable-->
            <!--&gt;</el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item class="form-button">-->
            <!--<el-button class="filter-item" @click="reset">-->
              <!--{{ $t('table.reset') }}-->
            <!--</el-button>-->
            <!--<el-button class="filter-item" type="primary" @click="search">-->
              <!--{{ $t('table.search') }}-->
            <!--</el-button>-->
          <!--</el-form-item>-->
        <!--</el-form>-->
      <!--</div>-->
    </div>
    <!-- 按钮区 -->
    <div class="app-container table-box">
      <div class="table-main">
        <!-- 表格 -->
        <v-table
          title="空间分析信息"
          v-if="tableMainHeight>0"
          :table-columns="tableColumns"
          :table-data="tableData"
          :loading="loading"
          :is-index="true"
          ref="table"
          :maxHeight="tableMainHeight">
          <template #topButtonList>
            <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
          </template>
          <template #checkType="scope">
            {{getDictValue(scope.row.checkType, checkTypeOptions)}}
          </template>
          <template #operation="scope">
            <a class="table-btn-view table-operation"
               @click="handleDetail(scope.row)">{{$t('table.view')}}</a>
          </template>
        </v-table>
      </div>
    </div>
    <!--指标树弹框-->
    <TargetDialog
      :dialog-visible="targetDialogShow"
      @close="targetEditClose"
      @success="targetEditSuccess"
      :title="targetTitle"
      :year="searchData.form.year"
    ></TargetDialog>
  </div>
</template>

<script>
  import { spaceAnalysis,
    spaceAnalysisExport
  } from '@/api/risk/cityWaringResult'
  import { getAreaList } from '@/api/system/area'
  import ButtonForm from '@/components/ButtonForm/index'
  import VTable from '@/components/VTable/index'
  import TargetDialog from '@/views/xy/public/cityAnalysis/components/targetDialog'
  import SearchForm from '@/components/searchForm/index'
  export default {
    name: "index",
    components: {
      VTable, ButtonForm,SearchForm, TargetDialog
    },
    data() {
      return {
        searchData:{
          form:{
            year: new Date().getFullYear()+'',
            checkType:"",
            targetName:"",
            targetCode:"",
            targetType:"",
          },
          options:[
            {
              title:'年份',
              key: "year",
              type: "dateYear",
            },
            {
              title:'体检分类',
              key: "checkType",
              type: "select",
              multiple:false,
              option: {
                data: this.checkTypeOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title:'指标分类',
              key: "targetName",
              type: "clickText",
              event:"openTreeDialog"
            }
          ]
        },
        tableColumns:[
          {
            prop: 'cityName',
            label: '城市名称',
            minWidth: '100',
            slotname: 'cityName',
            options: {}
          },
          {
            prop: 'rateNum',
            label: '评优类型指标总数',
            minWidth: '100',
            slotname: 'rateNum',
            options: {}
          },
          {
            prop: 'youXiuRate',
            label: '优秀',
            minWidth: '100',
            slotname: 'youXiuRate',
            options: {}
          },
          {
            prop: 'liangHaoRate',
            label: '良好',
            minWidth: '100',
            slotname: 'liangHaoRate',
            options: {}
          },
          {
            prop: 'yiBanRate',
            label: '一般',
            minWidth: '100',
            slotname: 'yiBanRate',
            options: {}
          },
          {
            prop: 'yuJingRate',
            label: '预警',
            minWidth: '100',
            slotname: 'yuJingRate',
            options: {}
          },
          // {
          //   prop: 'standardNum',
          //   label: '达标类型指数总数',
          //   minWidth: '100',
          //   slotname: 'standardNum',
          //   options: {}
          // },
          // {
          //   prop: 'daBiaoRate',
          //   label: '达标',
          //   minWidth: '100',
          //   slotname: 'daBiaoRate',
          //   options: {}
          // },
          // {
          //   prop: 'buDaBiaoRate',
          //   label: '不达标',
          //   minWidth: '100',
          //   slotname: 'buDaBiaoRate',
          //   options: {}
          // },
        ],
        tableData:[],
        selection: [],
        loading:false,
        total:1,
        pageNum:1,
        pageSize:10,
        detailOpenType:"add",
        detailDialogShow:false,
        detailTitle:"新增",
        year:"",
        threeTargetNo:"",
        resultType:"",
        buttonList:[
          {name:'导出数据',methods:'handleExport', type:'primary',hasPremission:["spaceAnalysis:export"]}
        ],
        tableMainHeight: 0,
        // 字典
        checkTypeOptions:[],
        targetDialogShow:false,
        targetTitle:"选择体检指标",
      }
    },
    watch:{
      'checkTypeOptions':{
        handler(newVal, oldVal){
          if(newVal){
            this.searchData.options.forEach(t=>{
              if(t.key == 'checkType'){
                // t.option.data = newVal
                // 过滤满意度
                t.option.data = newVal.filter(t=>t.value!=3)
              }
            })
          }
        }
      },
    },
    methods: {
      targetEditClose(){
        this.targetDialogShow =false
      },
      targetEditSuccess(data){
        console.log("获取值",data)
        this.searchData.form.targetName = data.targetName
        this.searchData.form.targetCode = data.targetCode,
          this.searchData.form.targetType = data.targetType
        this.targetEditClose()
      },
      toLoadMethods(methods) {
        this[methods]()
      },
      openTreeDialog(){
        console.log("打开弹框===========>")
        this.targetDialogShow = true
      },
      editClose(){
        this.detailDialogShow = false
      },
      handleDetail(row){
        this.threeTargetNo = row.threeTargetNo
        this.year = this.searchData.year
        this.resultType= 'rate'
        this.detailOpenType = "detail"
        this.detailTitle="详情"
        this.detailDialogShow = true
      },
      getDictValue(value,option){
        let item = option.find(t=> t.value == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      search(){
        this.fetch({
          ...this.searchData.form,
        })
      },
      fetch(params={}){
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        params.targetName = ''
        this.loading = true
        spaceAnalysis(params).then(res=>{
          if(res.code==200){
            this.tableData = res.data
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final=>{
          this.loading = false
        })
      },
      // 重置搜索条件
      resetSearchData(){
        this.searchData.form = {
          year: new Date().getFullYear()+'',
          checkType:"",
          targetName:"",
          targetCode:"",
          targetType:"",
        }
      },
      // 触发按钮区域按钮方法
      clickButton(methods){
        this[methods]()
      },
      handleExport(){
        let params = {
          ...this.searchData.form,
        }
        params.targetName = ''
        spaceAnalysisExport(params,`空间分析信息_${new Date().getTime()}.xlsx`);
      },
      closeDialog(){
        this.detailDialogShow = false
      }
    },
    activated(){
      this.fetch({
        ...this.searchData.form,
      })
    },
    created(){
      // 获取字典值
      this.checkTypeOptions = []
      this.$commonJs.filterDataDict("cityCheckType",this.checkTypeOptions)
      this.$commonJs.setLeftMenuHidden(this)
    },
    mounted(){
      this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
    }
  }
</script>

<style  lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

    .search-box {
      padding-bottom: 6px;
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .table-main {
        flex: 1;
        overflow: auto;
      }

      .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
      }

      ::v-deep .pagination-container {
        text-align: right;
      }

    }
  }
</style>
